<template>
  <div class="ad-chart-w">
    <div class="scroll-w">
      <a-scrollbar class="target-wrap-scroll" style="overflow: auto">
        <ul class="flex-c" :style="{ left: left + 'px' }">
          <li class="all-target" v-for="(target, i) in targetList" :key="i">
            <p>
              <span>{{ target.name }}</span>
              <span v-if="target.type == 'price'">($)</span>
            </p>
            <p class="value">
              <span class="value-price" v-if="target.type == 'percentage'">{{ formatVal(target) }}%</span>
              <span class="value-price" v-else>{{ formatVal(target) }}</span>
              <span>{{ ['cost', 'impressions', 'clicks', 'purchasesOrder', 'saleAmount'].includes(target.key) ? '总计' : '平均' }}</span>
            </p>
          </li>
        </ul>
      </a-scrollbar>
      <template v-if="showScrollBar">
        <div class="icon-w to-left">
          <icon-left @click="leftSlide" />
        </div>
        <div class="icon-w to-right">
          <icon-right @click="rightSlide" />
        </div>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { riskPageListMetrics } from '@/api/advert'

  onMounted(() => {
    let scrollEl = document.querySelector(`.target-wrap-scroll`) as HTMLElement
    let scrollWidth = scrollEl?.scrollWidth
    let clientWidth = scrollEl?.clientWidth
    showScrollBar.value = scrollWidth > clientWidth ? true : false
  })
  const props = defineProps({
    searchParams: {
      type: Object,
      default: () => {},
    },
    targetMap: {
      type: Object,
      default: () => {},
    },
  })

  const timer = ref()
  const left = ref(0)
  const showScrollBar = ref(false)
  const targetList = ref<Array<any>>([
    {
      key: 'cost',
      name: '花费',
      type: 'price',
      color: '#91cc75',
    },
    {
      key: 'cvr',
      name: '广告转化率CVR',
      type: 'percentage',
      color: '#a3beff',
    },
    {
      key: 'saleAmount',
      name: '广告销售额',
      type: 'price',
      color: '#3ba272',
    },
    {
      key: 'purchasesSale',
      name: '广告销量',
      type: 'num',
      color: '#fc8452',
    },
    {
      key: 'acos',
      name: 'ACOS',
      type: 'percentage',
      color: '#9a60b4',
    },
    {
      key: 'roas',
      name: 'ROAS',
      type: 'num',
      color: '#ea7ccc',
    },
    {
      key: 'impressions',
      name: '曝光量',
      type: 'num',
      color: '#5470c6',
    },
    {
      key: 'clicks',
      name: '点击量',
      type: 'num',
      color: '#fac858',
    },
    {
      key: 'ctr',
      name: '点击率CTR',
      type: 'percentage',
      color: '#ee6666',
    },
    {
      key: 'cpc',
      name: '单次点击成本CPC',
      type: 'price',
      color: '#73c0de',
    },
  ])

  // 滚动指标
  function leftSlide() {
    // 保存滚动盒子左侧已滚动的距离
    let scrollEl = document.querySelector(`.target-wrap-scroll`) as HTMLElement
    let left = scrollEl.scrollLeft
    let num = 0
    clearInterval(timer.value)
    timer.value = null
    timer.value = setInterval(() => {
      //   !left:已经滚动到最左侧
      //   一次性滚动距离（可调节）
      if (!left || num >= 330) {
        // 停止滚动
        clearInterval(timer.value)
        timer.value = null
        return
      }
      // 给滚动盒子元素赋值向左滚动距离
      scrollEl.scrollLeft = left -= 30
      // 保存向左滚动距离（方便判断一次性滚动多少距离）
      num += 30
    }, 20)
  }
  function rightSlide() {
    // 保存滚动盒子左侧已滚动的距离
    let scrollEl = document.querySelector(`.target-wrap-scroll`) as HTMLElement
    let left = scrollEl.scrollLeft

    // 保存元素的整体宽度
    let scrollWidth = scrollEl.scrollWidth

    // 保存元素的可见宽度
    let clientWidth = scrollEl.clientWidth

    let num = 0
    clearInterval(timer.value)
    timer.value = setInterval(() => {
      // 已经滚动距离+可见宽度
      // left+clientWidth>=scrollWidth：滚动到最右侧
      // num>=300一次性滚动距离
      if (left + clientWidth >= scrollWidth || num >= 330) {
        clearInterval(timer.value)
        return
      }
      // 给滚动盒子元素赋值向左滚动距离
      scrollEl.scrollLeft = left += 30
      // 保存向左滚动距离（方便判断一次性滚动多少距离）
      num += 30
    }, 20)
  }

  // 数量多以万为单位
  function formatVal(item: any) {
    let val = item.value || 0
    if (val < 100000) {
      return item.type != 'num' || item.key == 'roas' ? Number(val).toFixed(4) : val
    } else {
      return Number(val / 10000).toFixed(2) + '万'
    }
  }
  // 获取所有指标概览数据
  async function getTargetList() {
    const res: any = await riskPageListMetrics(props.searchParams)
    if (res?.data) {
      targetList.value.forEach((item: any) => {
        item.value = res.data[item.key]
      })
    }
  }
  // 刷新数据
  function refreshData() {
    getTargetList()
  }
  defineExpose({ refreshData })
</script>
<style lang="less" scoped>
  .ad-chart-w {
    background-color: #fff;
    overflow: hidden;
    margin-top: 5px;
    padding: 10px 0;
  }
  .scroll-w {
    width: 100%;
    position: relative;
    padding: 0 20px;
    .icon-w {
      width: 24px;
      height: 24px;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      text-align: center;
      line-height: 24px;
      color: #999;
      position: absolute;
      top: 20px;
      cursor: pointer;
      &.to-left {
        left: 10px;
      }
      &.to-right {
        right: 10px;
      }
    }
  }
  :deep(.target-wrap-scroll) {
    border: 1px solid var(--color-border);
  }
  .all-target {
    width: 165px;
    border-right: 1px solid var(--color-border);
    height: 60px;
    padding: 10px 5px 10px 10px;
    position: relative;
    font-size: 12px;
    line-height: 20px;
    flex-shrink: 0;
    &:last-child {
      border-right: 0;
    }
    .value-price {
      font-size: 16px;
      font-weight: bold;
      margin-right: 8px;
    }
    .line {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      height: 2px;
    }
    .price-item {
      .label {
        width: 42px;
      }
      .val {
        margin-right: 5px;
      }
      .arco-icon {
        font-size: 18px;
      }
    }
    .diff {
      margin-left: 5px;
    }
    .delete-icon {
      position: absolute;
      top: 2px;
      cursor: pointer;
      right: 5px;
    }
    &.active {
      border-color: rgba(var(--primary-6), 0.4);
      color: rgba(var(--primary-6), 0.8);
      .arco-icon {
        color: rgba(var(--primary-6), 0.8);
      }
    }
    .arco-icon {
      font-size: 14px;
      color: #666;
      margin-left: 2px;
    }
  }
  .type-w {
    text-align: right;
  }

  :deep(.arco-radio-group-button) {
    padding: 0;
    .arco-radio-button {
      margin: 0;
      background-color: #fff;
      line-height: 26px;
      border: 1px solid var(--color-border);
      &:first-child {
        border-radius: 4px 0 0 4px;
      }
      &:last-child {
        border-radius: 0 4px 4px 0;
      }
    }
    .arco-radio-checked {
      border-color: rgb(var(--primary-6));
    }
  }
</style>
